import '../../public.dart';

class WalletCard extends StatelessWidget {
  const WalletCard({super.key});

  @override
  Widget build(BuildContext context) {
    return ProviderWidget(
      builder: (context, model, child) {
        // white card styled like reference screenshot
        return Container(
          padding: const EdgeInsets.all(20),
          margin: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(12),
            boxShadow: [
              BoxShadow(
                color: Colors.black12,
                blurRadius: 12,
                offset: const Offset(0, 6),
              ),
            ],
          ),
          child: Stack(
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text(
                    'Available Balance',
                    style: TextStyle(fontSize: 14, color: Colors.grey),
                  ),
                  const SizedBox(height: 8),
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(
                        '₦',
                        style: TextStyle(
                          fontSize: 26,
                          fontWeight: FontWeight.w700,
                          color: Colors.grey[800],
                        ),
                      ),
                      const SizedBox(width: 6),
                      Text(
                        model.displayBalance,
                        style: const TextStyle(
                          fontSize: 36,
                          fontWeight: FontWeight.w800,
                          color: Colors.black87,
                        ),
                      ),
                      const SizedBox(width: 6),
                      GestureDetector(
                        onTap: () {
                          model.toggleBalanceHidden();
                        },
                        child: Icon(
                          model.isBalanceHidden
                              ? Icons.visibility_off_outlined
                              : Icons.visibility_outlined,
                          size: 20,
                          color: Colors.blueAccent,
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(height: 12),
                  const Divider(
                    height: 20,
                    thickness: 1,
                    color: Color(0xFFF2F2F2),
                  ),
                  const SizedBox(height: 10),

                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      _actionItem(
                        Icons.local_offer,
                        'Sale Cards',
                        onTap: () {
                          RouterHelper.navigator.pushNamed(
                            Routers.sellGiftCard,
                          );
                        },
                      ),
                      _actionItem(
                        Icons.swap_horiz,
                        'Withdrawal',
                        onTap: () {
                          onWithdrawPressed(model, context);
                        },
                      ),
                      _actionItem(Icons.wallet_outlined, 'Bank Cards'),
                    ],
                  ),
                ],
              ),
            ],
          ),
        );
      },
      model: Provider.of<UserModel>(context),
    );
  }

  Widget _actionItem(IconData icon, String label, {VoidCallback? onTap}) {
    return GestureDetector(
      onTap: onTap,
      child: Column(
        children: [
          Container(
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
              color: const Color(0xFFF5F5F5),
              borderRadius: BorderRadius.circular(8),
            ),
            child: Icon(icon, size: 28, color: Colors.blueAccent),
          ),
          const SizedBox(height: 6),
          Text(
            label,
            style: const TextStyle(fontSize: 14, color: Colors.black87),
          ),
        ],
      ),
    );
  }

  void onWithdrawPressed(UserModel model, BuildContext context) {
    if (model.hasPin) {
      RouterHelper.navigator.pushNamed(Routers.withdraw).then((value) {
        if (value == true) {
          model.getBalance();
        }
      });
    } else {
      BrnDialogManager.showConfirmDialog(
        context,
        title: 'Don\'t have a PIN',
        message: 'Please set a PIN to withdraw',
        cancel: 'Exit',
        confirm: 'Confirm',
        onCancel: () {
          Navigator.of(context).pop(); // 退出页面
        },
        onConfirm: () {
          Navigator.of(context).pop(); // 退出页面
          RouterHelper.navigator.pushNamed(Routers.createPin).then((value) {
            if (value == true) {
              model.checkPin();
            }
          });
        },
      );
    }
  }
}
